// 创建Vue变量vm
let vm=new Vue({
    el:"#app",//通过ID选择器找到Vue的控制范围
    delimiters: ["[[","]]"], //定义插值表达式的左右语法
    //数据对象
    data:{
        // v-model
        username:'',
        password:'',
        password2:'',
        mobile:'',
        allow:false,
        image_code:'',
        image_coed_url:'',
        uuid: '',
        sms_code_tip:'获取短信验证码',
        sms_code:"",
        send_flag:false,   //send_flag就是锁  false表示门开，true是门关

        // v-show
        error_name: false,
        error_password:false,
        error_password2:false,
        error_mobile:false,
        error_allow:false,
        error_image_code:"",
        error_sms_code:false,


        //error_message
        error_name_message:"",
        error_mobile_message:"",
        error_image_code_message:"",
        error_sms_code_message:"",
    },
    // 页面加载后自动调用
    mounted(){
    // 生成图片验证码
        this.generate_image_code()
    },
    //定义和实现事件方法
    methods:{
        // 发送短信验证码
    send_sms_code(){
        // 避免恶意用户频繁点击获取短信验证码
        //避免恶意用户频繁点击获取短信验证码的标签
        if(this.send_flag===true){// 判断是否有人正在上厕所
            return //有人正在上厕所，则退回去
        }
        this.send_flag=true //如果可以进入到厕所，立即关门
        //校验数据：mobile,image_code
        this.check_mobile()
        this.check_image_code()
        if(this.error_mobile===true || this.error_image_code===true){
            this.send_flag = false  //图形或验证码错误，厕所开门
            return;
        }
        let url = "/sms_codes/"+this.mobile+"?image_code="+this.image_code+
                    "&uuid="+this.uuid
        axios.get(url,{responseType:"json"})
            .then(resp=>{
                if(resp.data.code === "0"){
                    //  显示倒计时60秒
                    //  serInterva("回调函数"，“时间间隔”)
                    let duration = 60
                    let t= setInterval(()=>{
                    if(duration===1){//倒计时即将结束
                        clearInterval(t) //停止回调函数的执行
                        this.sms_code_tip="获取短信验证码" //还原sms_code_tip的文字
                        this.generate_image_code() //重新生成图形验证码
                        this.send_flag=false  //倒计时结束厕所开门
                    }else{
                        duration-=1
                        this.sms_code_tip=duration+"秒"
                    }
                },1000)
                }else if(resp.data.code === "4001"){ //图形验证码错误
                    this.error_image_code_message=response.data.errmsg
                    this.error_image_code=true
                    this.send_flag = false  //图形验证码错误厕所开门
                }else {    //短信验证码错误 4002
                    this.error_sms_code=true
                    this.error_sms_code_message=response.data.errmsg
                    this.send_flag=false //短信验证码错误厕所开门
                }
            })
            .catch(err=>{
                console.log(err)
                this.send_flag=false  //网路错误开门
            })

    },
        // 图片验证码的实现
    generate_image_code(){
        this.uuid = generateUUID()
        this.image_coed_url="/image_codes/"+this.uuid
    },
        // 校验用户名
    check_username(){
        let  re = /^[a-zA-Z0-9-_]{5,20}$/
        if(re.test(this.username)){
            this.error_name = false
        }else{
            this.error_name = true
            this.error_name_message = '请输入5-20个字符的正确用户名'
        }
        //     判断用户是否重复注册
        if(this.error_name ===false){
            let url="/usernames/"+this.username+"/count"

            axios.get(url,{responseType:"json"})
            .then(response=>{ //如果箭头函数报红，说明不支持，解决办法如下：
            //正确响应时执行的代码
            if(response.data.count===1){
                //用户名已经存在
                this.error_name_message="用户名已经存在"
                this.error_name=true
            }else{
                //用户名不存在
                this.error_name=false
            }
            })
            .catch(error=>{
                //报错时执行的代码
                console.log(error.response)
            })
        }
    },
    // 校验密码
    check_password(){
        let re = /^[a-zA-Z0-9]{8,20}$/;
        if(re.test(this.password)){
            this.error_password = false
        }else{
            this.error_password = true
        }
    },
    // 校验确认密码
    check_password2(){
        if(this.password != this.password2){
            this.error_password2 = true
        }else {
            this.error_password2 = false
        }
    },
    // 校验手机号
    check_mobile(){
        let re = /^1[3-9]\d{9}$/
        if(re.test(this.mobile)){
            this.error_mobile = false
        }else{
            this.error_mobile = true
            this.error_mobile_message = '手机号格式错误'
        }
        if(this.error_mobile === false){
            let url = "/mobile/"+this.mobile+"/count"
            axios.get(url,{responseType: 'json'})
                .then(resp=>{
                    if(resp.data.count === 1){
                        this.error_mobile_message = '手机号已被注册'
                        this.error_mobile = true
                    }else {
                        this.error_mobile = false
                    }
            }).catch(err=>{
                console.log(err)
            })
        }
    },
    // 判断图片验证码
    check_image_code(){
            if(this.image_code.length != 4){
                this.error_image_code = true
                this.error_image_code_message = "验证码错误"
            }
            else {
                this.error_image_code = false
            }
    },
      // 判断短信验证码
    check_sms_code(){
            if(this.sms_code.length != 4){
                this.error_sms_code = true
                this.error_sms_code_message="请填写4为短信验证码"
            }
            else {
                this.error_sms_code = false
            }
    },
    // 校验是否勾选协议
    check_allow(){
        if(this.allow === true){
            this.error_allow = false
        }else {
            this.error_allow = true
        }
    },
    // 监听表单提交事件
    on_submit(){
        this.check_username();
        this.check_password();
        this.check_password2();
        this.check_mobile();
        this.check_sms_code();
        this.check_allow();
        if (this.error_name === true || this.error_password === true ||
            this.error_password2 === true || this.error_mobile === true ||
            this.error_allow === true || this.check_sms_code === true){
            window.event.returnValue = false;
        }
    },

    }
})